<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- html文件 -->
        <input type="text" placeholder="请输入用户名" id="username" />
        <button id="btn">进入聊天室</button>

        <script>
            // js文件
            // 主要就是记录是哪个用户进入的聊天室
            ((doc, storage, location) => {
                let username = doc.querySelector("#username");
                let btn = doc.querySelector("#btn");
                let init = () => {
                    bindEvent();
                };
                function bindEvent() {
                    btn.addEventListener("click", headEventBtnClick, false);
                }
                function headEventBtnClick() {
                    let name = username.value.trim();
                    if (name.length < 2) {
                        alert("长度不能小于2个字符");
                        return;
                    }
                    let usernameInfo = {
                        username:name,
                        userid:name+(Math.floor(Math.random() * (Math.pow(10, 6) - Math.pow(10,5))) + Math.pow(10,5)),
                        img:`rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`
                    }
                    // 输入用户名，本地存储用户名，进入聊天页
                    storage.setItem("usernameInfo", JSON.stringify(usernameInfo));
                    location.href = "/chatPage.html";
                }
                init();
            })(document, localStorage, location);
        </script>
    </body>
</html>
